<template>
    <div class="app-container">

        <el-card>
            <div slot="header">
                <h3>岗位申请表</h3>
            </div>
            <el-form :model="applyForm" :rules="applyFormRules" ref="applyForm" label-width="100px" class="form">
                <el-form-item label="岗位编号" prop="jobId">
                    <el-input v-model="applyForm.jobId" disabled></el-input>
                </el-form-item>
                <el-form-item label="岗位名称" prop="jobName">
                    <el-input v-model="applyForm.jobName" disabled></el-input>
                </el-form-item>
                <el-form-item label="岗位需求" prop="jobRequirement">
                    <el-input v-model="applyForm.jobRequirement" disabled></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="name">
                    <el-input v-model="applyForm.name"></el-input>
                </el-form-item>
                <el-form-item label="申请人学号" prop="studentId">
                    <el-input v-model="applyForm.studentId"></el-input>
                </el-form-item>
                <el-form-item label="申请原因" prop="reason">
                    <el-input v-model="applyForm.reason" type="textarea" :rows="3"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交申请</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
import jobApi from '@/api/job'
// import { resolve } from 'path/posix';
// import { async } from 'q';

export default {
    data() {
        return {
            currentStudent: { // 当前编辑的岗位
            },
            isStudentId: '',//表单中学生id
            baseStudentId: '',//数据库查询学生id
            applyForm: {
                jobId: '',
                jobName: '',
                jobRequirement: '',
                name: '',
                studentId: '',
                reason: ''
            },
            applyFormRules: {
                name: [
                    { required: true, message: '请填写申请人', trigger: 'blur' }
                ],
                // reason: [
                //     { required: true, message: '请填写申请原因', trigger: 'blur' }
                // ],
                studentId: [
                    { required: true, message: '请填写申请人学号', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.loadJob();
    },
    methods: {
        // 加载岗位信息
        loadJob() {
            // 获取当前岗位ID
            // console.log(this.$route.query)
            const id = this.$route.query.id;
            console.log(id)
            jobApi.getJob(id)
                .then(res => {
                    this.applyForm = res.data.job
                    // console.log("applyForm", this.applyForm)
                })
                .catch(error => {
                    console.log(error)
                })
        },
        //判断该学生是否存在学生表中

        makeSureStudent(id) {
            return new Promise(resolve => {
                jobApi.getStudent(id)
                    .then(res => {
                        this.currentStudent = res.data.student
                        this.baseStudentId = this.currentStudent.studentId
                        console.log("baseStudentId", this.baseStudentId)
                        resolve()
                    })
                    .catch(error=>{
                        this.$message.error('申请提交失败，该学生学号错误或不存在',error);
                        console.log(error)
                    })
            })

        },
        //
        //提交表单调用接口
        apply() {
            return new Promise(resolve => {
                this.$refs.applyForm.validate(valid => {
                    if (valid) {
                        if (this.isStudentId == this.baseStudentId) {
                            // 调用后端API提交岗位申请
                            // console.log("applyFormafter", this.applyForm)
                            jobApi.addJobAppliciation(this.applyForm)
                                .then(response => {
                                    // console.log("提交的res",response)
                                    this.$message.success('申请提交成功');
                                    // 跳转到申请记录列表页面
                                    // this.$router.push('/post/processing');
                                    this.$router.push('/studentView/studentInformation');
                                    
                                }).catch(error => {
                                    this.$message.error('申请提交失败，请稍后重试');
                                });
                        } else {
                            this.$message.error('申请提交失败，该学生信息错误或不存在');
                        }
                    }
                    resolve()
                });
            })
        },
        async submitForm() {
            console.log("applyFormbefor", this.applyForm)
            this.isStudentId = this.applyForm.studentId
            console.log("this.isStudentId", this.isStudentId)
            await this.makeSureStudent(this.isStudentId)
            console.log("此时已经获取到后端id了", this.baseStudentId)
            await this.apply()
            //清空查询表单
            this.currentStudent = {}
            this.isStudentId = ""
            this.baseStudentId = ""
        }
    }


}
</script>

<style >
.applyBox {
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
}
</style>

